<template>
  <view class="email-page">
    <!-- 导航栏 -->
    <NavBar @back="goBack" />
    
    <!-- 邮箱输入内容 -->
    <view class="email-content">
      <view class="email-container">
        <view class="email-header">
          <text class="title">绑定邮箱</text>
          <text class="subtitle">用于接收重要通知</text>
        </view>

        <view class="email-section">
          <input 
            class="email-input" 
            type="text" 
            v-model="email" 
            placeholder="请输入邮箱地址"
            placeholder-class="placeholder" 
            @input="validateEmail"
          />
          <text class="error-text" v-if="errorMessage">{{ errorMessage }}</text>
        </view>

        <button class="confirm-btn" @click="handleConfirm" :disabled="!isValidEmail">
          确认
        </button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import NavBar from '@/components/NavBar.vue'

const email = ref('')
const errorMessage = ref('')
const isValidEmail = ref(false)

// 邮箱校验规则
const validateEmail = () => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  
  if (!email.value.trim()) {
    errorMessage.value = ''
    isValidEmail.value = false
    return
  }
  
  if (!emailRegex.test(email.value)) {
    errorMessage.value = '请输入正确的邮箱格式'
    isValidEmail.value = false
  } else {
    errorMessage.value = ''
    isValidEmail.value = true
  }
}

// 确认按钮处理
const handleConfirm = () => {
  if (!isValidEmail.value) {
    return uni.showToast({ title: '请输入正确的邮箱', icon: 'none' })
  }

  // 这里可以调用API保存邮箱
  uni.showToast({ 
    title: '邮箱绑定成功', 
    icon: 'success' 
  })
  
  // 延迟返回上一页
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.email-page {
  height: 100vh;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.email-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx 32rpx;
  box-sizing: border-box;
  width: 100%;
}

.email-container {
  width: 100%;
  max-width: 600rpx;
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
  box-sizing: border-box;
  margin: 0 auto;
}

.email-header {
  text-align: center;
  margin-bottom: 60rpx;

  .title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    display: block;
    margin-bottom: 12rpx;
  }

  .subtitle {
    font-size: 28rpx;
    color: #999;
  }
}

.email-section {
  margin-bottom: 60rpx;

  .email-input {
    width: 100%;
    height: 100rpx;
    background: #f5f5f5;
    border-radius: 16rpx;
    padding: 0 32rpx;
    font-size: 32rpx;
    color: #333;
    box-sizing: border-box;
    border: 2rpx solid transparent;
    transition: border-color 0.3s ease;

    &:focus {
      border-color: #07c160;
      background: #fff;
    }
  }

  .placeholder {
    color: #999;
  }

  .error-text {
    display: block;
    font-size: 24rpx;
    color: #ff4757;
    margin-top: 12rpx;
  }
}

.confirm-btn {
  width: 100%;
  height: 100rpx;
  background: #07c160;
  border-radius: 50rpx;
  color: #fff;
  font-size: 36rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-sizing: border-box;
  transition: all 0.3s ease;

  &::after {
    border: none;
  }

  &:active {
    opacity: 0.9;
  }

  &:disabled {
    background: #ccc;
    opacity: 0.6;
  }
}
</style>
